<template>
  <div class="designer-btns">
    <div class="pull-left">
      <el-tooltip class="item" effect="dark" content="上一步" placement="top-start">
        <el-button
          class="darkPrimary"
          size="mini"
          :disabled="!currentStationInfo.key || currentStationInfo.key == 'Start'"
          @click="prevStep"
          icon="el-icon-arrow-left"
        ></el-button>
      </el-tooltip>
      <el-tooltip class="item" effect="dark" content="下一步" placement="top-start">
        <el-button
          class="darkPrimary"
          size="mini"
          :disabled="!currentStationInfo.key || currentStationInfo.key == 'End'"
          @click="nextStep"
          icon="el-icon-arrow-right"
        ></el-button>
      </el-tooltip>
      <div class="row">
        <div class="text">缩略图</div>
        <el-switch v-model="thumbnail" active-color="#2483ff" inactive-color="#000" @change="handleChange"> </el-switch>
        <div class="text">自动布局</div>
        <el-switch v-model="autoLayout" active-color="#2483ff" inactive-color="#000" @change="handleLayout"> </el-switch>
      </div>
    </div>
    <div class="pull-right">
      <el-tooltip class="item" effect="dark" content="返回" placement="top-start">
        <el-button class="darkPrimary" size="mini" @click="onReturn" icon="el-icon-s-home"></el-button>
      </el-tooltip>
      <el-tooltip class="item" effect="dark" content="保存" placement="top-start" v-if="!readOnlyPage">
        <el-button class="darkPrimary" size="mini" @click="saveDesigner" icon="el-icon-document"></el-button>
      </el-tooltip>
    </div>
  </div>
</template>
<script>
import { mapState } from 'vuex';

export default {
  components: {},
  inject: ['reload'],
  data() {
    return {
      thumbnail: true,
      autoLayout: false
    };
  },
  computed: {
    ...mapState({
      currentStationInfo: (state) => state.design.currentStationInfo,
      allActiveStations: (state) => state.design.allActiveStations
    }),
    // 路由参数
    routeQuery() {
      return this.$route.query;
    },
    routePath() {
      return this.$route.path;
    },
    // 查看页面 只读
    readOnlyPage() {
      if (this.routePath.endsWith('pdesign') || this.routePath.endsWith('gdesign')) {
        return false;
      } else {
        return true;
      }
    },
    // 是否工单工艺路线设计器
    isGdEditorPage() {
      if (this.$route.path.endsWith('pdesign') || this.$route.path.endsWith('pread')) {
        return false;
      } else if (this.$route.path.endsWith('gdesign') || this.$route.path.endsWith('gread')) {
        return true;
      }
    }
  },
  methods: {
    prevStep() {
      this.$emit('handleChangeStep', -1);
    },
    nextStep() {
      this.$emit('handleChangeStep', 1);
    },
    // 返回工单管理
    onReturn() {
      let path = this.routePath;
      // 工单管理
      if (path.endsWith('gread')) {
        this.$router.replace('/product/workorderRoute');
      }
      if (path.endsWith('gdesign')) {
        this.$router.replace('/product/workorderRoute');
      }
      // 产品工艺路线
      if (path.endsWith('pread')) {
        this.$router.replace('/product/productrouteManage');
      }
      if (path.endsWith('pdesign')) {
        this.$router.replace('/product/productrouteManage');
      }
    },
    saveDesigner() {
      this.$emit('saveDesigner');
    },
    handleChange() {
      this.$emit('handleChangeThumbnail', this.thumbnail);
    },
    handleLayout() {
      this.$emit('handleAutoLayout', this.autoLayout);
    }
  }
};
</script>
<style scoped lang="scss">
.designer-btns {
  display: flex;
  justify-content: space-between;
  border-bottom: 3px solid #dedede;
  padding: 4px 10px;
  .pull-left {
    display: flex;
    .row {
      display: flex;
      align-items: center;
      margin-left: 5px;
      font-size: 12px;
      .text {
        margin: 0 5px;
        white-space: nowrap;
      }
    }
  }

  .bg-blue {
    display: flex;
    align-items: center;
  }
}
</style>
